"use client"

import { useState, useEffect } from "react"

interface AISidebarProps {
  currentSection: number
  currentCourseNumber: string
}

export function AISidebar({ currentSection, currentCourseNumber }: AISidebarProps) {
  const [aiContent, setAiContent] = useState('')
  const [lastUpdateTime, setLastUpdateTime] = useState('')
  const [isLoading, setIsLoading] = useState(false)

  const sectionNames = ['首页', '字根学习', '偏旁笔画', '书写讲解', '拖拽组合', '游戏巩固', '结束页']

  // 当板块或课程变化时加载讲稿
  useEffect(() => {
    loadSavedScript()
  }, [currentSection, currentCourseNumber])

  // 根据不同Tab生成对应的讲课稿内容
  const generateScriptContent = (section: number, courseNumber: string) => {
    const currentChar = '木' // 可以根据courseNumber动态获取
    
    switch(section) {
      case 0: // 首页
        return `
          <div style="padding: 20px; line-height: 1.8; font-size: 16px; color: #333;">
            <h3 style="color: #667eea; border-bottom: 3px solid #e8e8ff; padding-bottom: 10px; margin-bottom: 20px;">
              欢迎来到岚小字识字课堂 - 第${courseNumber}课
            </h3>
            
            <div style="background: #f0f8ff; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #4169e1; margin-bottom: 10px;">🎉 课前欢迎</h4>
              <p>亲爱的小朋友们，欢迎来到今天的汉字学习课堂！今天我们要一起认识一个非常有趣的汉字。</p>
            </div>
            
            <div style="background: #fff8dc; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #ff8c00; margin-bottom: 10px;">📚 课程介绍</h4>
              <p>在今天的课程中，我们将通过7个有趣的环节来学习汉字：</p>
              <ul style="margin-left: 20px; line-height: 1.8;">
                <li>字根学习 - 了解汉字的基本构成</li>
                <li>偏旁笔画 - 学习汉字的结构规律</li>
                <li>书写讲解 - 掌握正确的书写方法</li>
                <li>拖拽组合 - 通过游戏理解汉字组合</li>
                <li>游戏巩固 - 在快乐中巩固学习成果</li>
              </ul>
            </div>
            
            <div style="background: #f0fff0; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #32cd32; margin-bottom: 10px;">✨ 学习准备</h4>
              <p>请小朋友们准备好笔和纸，我们马上就要开始精彩的汉字之旅了！</p>
            </div>
          </div>
        `
      
      case 1: // 字根学习
        return `
          <div style="padding: 20px; line-height: 1.8; font-size: 16px; color: #333;">
            <h3 style="color: #667eea; border-bottom: 3px solid #e8e8ff; padding-bottom: 10px; margin-bottom: 20px;">
              字根学习 - 第${courseNumber}课：认识"${currentChar}"字
            </h3>
            
            <div style="background: #f8f9ff; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #4caf50; margin-bottom: 10px;">🌱 字根起源</h4>
              <p>"${currentChar}"字来源于古代象形文字，古人看到大树的样子，就创造了这个字。让我们一起来看看它是怎么演变的。</p>
            </div>
            
            <div style="background: #fff8e1; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #ff9800; margin-bottom: 10px;">🔍 字根分析</h4>
              <ul style="margin-left: 20px; line-height: 1.8;">
                <li>基本字根：${currentChar}是一个独立的字根</li>
                <li>构字能力：可以组成很多其他汉字</li>
                <li>记忆方法：联想大树的形状</li>
              </ul>
            </div>
            
            <div style="background: #e8f5e8; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #4caf50; margin-bottom: 10px;">📝 教学重点</h4>
              <p>重点让孩子理解字根的概念，知道汉字是由不同的字根组合而成的。</p>
            </div>
          </div>
        `
      
      case 2: // 偏旁笔画
        return `
          <div style="padding: 20px; line-height: 1.8; font-size: 16px; color: #333;">
            <h3 style="color: #667eea; border-bottom: 3px solid #e8e8ff; padding-bottom: 10px; margin-bottom: 20px;">
              偏旁笔画 - "${currentChar}"字的结构分析
            </h3>
            
            <div style="background: #ffe6e6; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #e74c3c; margin-bottom: 10px;">🏗️ 偏旁结构</h4>
              <p>"${currentChar}"字是独体字，本身就是一个完整的偏旁，可以作为其他字的部首。</p>
            </div>
            
            <div style="background: #e6f3ff; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #2196f3; margin-bottom: 10px;">✏️ 笔画顺序</h4>
              <ul style="margin-left: 20px; line-height: 1.8;">
                <li>第一笔：横（从左到右）</li>
                <li>第二笔：竖（从上到下）</li>
                <li>第三笔：撇（从右上到左下）</li>
                <li>第四笔：捺（从左上到右下）</li>
              </ul>
            </div>
            
            <div style="background: #f0f8ff; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #9c27b0; margin-bottom: 10px;">📐 书写要点</h4>
              <p>注意笔画的起笔、行笔和收笔，保持字形的平衡和美观。</p>
            </div>
          </div>
        `
      
      case 3: // 书写讲解
        return `
          <div style="padding: 20px; line-height: 1.8; font-size: 16px; color: #333;">
            <h3 style="color: #667eea; border-bottom: 3px solid #e8e8ff; padding-bottom: 10px; margin-bottom: 20px;">
              书写讲解 - "${currentChar}"字的规范书写
            </h3>
            
            <div style="background: #f3e5f5; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #9c27b0; margin-bottom: 10px;">🖌️ 书写姿势</h4>
              <p>坐姿端正，握笔正确，纸张平整，为规范书写做好准备。</p>
            </div>
            
            <div style="background: #e8f5e8; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #4caf50; margin-bottom: 10px;">📏 字形结构</h4>
              <ul style="margin-left: 20px; line-height: 1.8;">
                <li>整体形状：方正平衡</li>
                <li>笔画分布：均匀协调</li>
                <li>重心位置：居中稳定</li>
              </ul>
            </div>
            
            <div style="background: #fff3e0; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #ff9800; margin-bottom: 10px;">👀 观察要点</h4>
              <p>引导学生仔细观察字的每一个笔画，理解笔画之间的关系。</p>
            </div>
          </div>
        `
      
      case 4: // 拖拽组合
        return `
          <div style="padding: 20px; line-height: 1.8; font-size: 16px; color: #333;">
            <h3 style="color: #667eea; border-bottom: 3px solid #e8e8ff; padding-bottom: 10px; margin-bottom: 20px;">
              拖拽组合 - 用"${currentChar}"字组词造句
            </h3>
            
            <div style="background: #e0f2f1; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #00796b; margin-bottom: 10px;">🧩 组合练习</h4>
              <p>让孩子通过拖拽的方式，将"${currentChar}"字与其他字组合成词语。</p>
            </div>
            
            <div style="background: #fce4ec; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #c2185b; margin-bottom: 10px;">🔤 常见组合</h4>
              <ul style="margin-left: 20px; line-height: 1.8;">
                <li>${currentChar}头 - 树的顶端</li>
                <li>${currentChar}叶 - 树的叶子</li>
                <li>${currentChar}材 - 制作用的木料</li>
                <li>果${currentChar} - 结果实的树</li>
              </ul>
            </div>
            
            <div style="background: #f3e5f5; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #7b1fa2; margin-bottom: 10px;">🎭 互动演示</h4>
              <p>通过拖拽游戏，让孩子在玩中学，在学中玩，加深对汉字组合规律的理解。</p>
            </div>
          </div>
        `
      
      case 5: // 游戏巩固
        return `
          <div style="padding: 20px; line-height: 1.8; font-size: 16px; color: #333;">
            <h3 style="color: #667eea; border-bottom: 3px solid #e8e8ff; padding-bottom: 10px; margin-bottom: 20px;">
              游戏巩固 - "${currentChar}"字学习成果检验
            </h3>
            
            <div style="background: #e8f5e8; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #4caf50; margin-bottom: 10px;">🎮 游戏环节</h4>
              <p>通过有趣的游戏活动，检验和巩固孩子对"${currentChar}"字的学习成果。</p>
            </div>
            
            <div style="background: #fff8e1; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #ff9800; margin-bottom: 10px;">🏆 测试内容</h4>
              <ul style="margin-left: 20px; line-height: 1.8;">
                <li>字形识别：能否正确识别"${currentChar}"字</li>
                <li>笔画顺序：能否按正确顺序书写</li>
                <li>组词能力：能否用"${currentChar}"字组词</li>
                <li>理解应用：能否在语境中正确使用</li>
              </ul>
            </div>
            
            <div style="background: #e3f2fd; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #1976d2; margin-bottom: 10px;">🎉 奖励机制</h4>
              <p>对表现优秀的孩子给予鼓励和奖励，增强学习的积极性和成就感。</p>
            </div>
          </div>
        `
      
      case 6: // 结束页
        return `
          <div style="padding: 20px; line-height: 1.8; font-size: 16px; color: #333;">
            <h3 style="color: #667eea; border-bottom: 3px solid #e8e8ff; padding-bottom: 10px; margin-bottom: 20px;">
              课程总结 - 第${courseNumber}课学习回顾
            </h3>
            
            <div style="background: #f0f8ff; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #4169e1; margin-bottom: 10px;">📋 学习总结</h4>
              <p>今天我们一起学习了"${currentChar}"字，从字根起源到书写规范，从组词练习到游戏巩固，相信大家都有很大的收获。</p>
            </div>
            
            <div style="background: #f0fff0; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #32cd32; margin-bottom: 10px;">🎯 学习成果</h4>
              <ul style="margin-left: 20px; line-height: 1.8;">
                <li>认识了"${currentChar}"字的字形和含义</li>
                <li>掌握了正确的笔画顺序</li>
                <li>学会了相关的词语组合</li>
                <li>通过游戏巩固了学习效果</li>
              </ul>
            </div>
            
            <div style="background: #fff8dc; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #ff8c00; margin-bottom: 10px;">👏 课后鼓励</h4>
              <p>小朋友们今天表现得非常棒！希望大家课后多练习，下次课我们将学习更多有趣的汉字。</p>
            </div>
            
            <div style="background: #ffe6f0; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #e91e63; margin-bottom: 10px;">➡️ 下节预告</h4>
              <p>下一节课我们将学习新的汉字，敬请期待！记得按时来上课哦！</p>
            </div>
          </div>
        `
      
      default:
        return `
          <div style="text-align: center; padding: 50px; color: #666;">
            <div style="font-size: 48px; margin-bottom: 20px;">📝</div>
            <h3>讲课稿准备中</h3>
          </div>
        `
    }
  }

  // 加载已保存的讲稿
  const loadSavedScript = async () => {
    setIsLoading(true)
    try {
      // 模拟加载延迟
      await new Promise(resolve => setTimeout(resolve, 500))
      
      // 根据当前Tab生成对应内容
      const content = generateScriptContent(currentSection, currentCourseNumber)
      setAiContent(content)
      setLastUpdateTime(new Date().toLocaleTimeString())
    } catch (error) {
      console.error('加载讲稿失败:', error)
      setAiContent(`
        <div style="text-align: center; padding: 50px; color: #e74c3c;">
          <div style="font-size: 48px; margin-bottom: 20px;">❌</div>
          <h3>加载失败</h3>
          <p style="margin-bottom: 20px;">无法加载讲课稿内容</p>
        </div>
      `)
    } finally {
      setIsLoading(false)
    }
  }

  // 刷新内容
  const refreshScript = () => {
    loadSavedScript()
  }

  // 打开后端编辑器
  const openBackendEditor = () => {
    const backendUrl = `/admin?course=${currentCourseNumber}&section=${currentSection}&module=${sectionNames[currentSection]}`
    window.open(backendUrl, '_blank')
  }

  return (
    <div className="w-96 bg-gradient-to-b from-gray-50 to-white flex flex-col shadow-2xl rounded-l-[30px] overflow-hidden h-screen relative">
      {/* 装饰性背景 */}
      <div className="absolute top-0 left-0 right-0 h-48 bg-gradient-to-br from-purple-100/30 to-transparent pointer-events-none"></div>
      
      {/* 头部 */}
      <div className="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-6 text-center text-xl font-bold flex items-center justify-between gap-3 relative overflow-hidden">
        {/* 装饰元素 */}
        <div className="absolute -bottom-12 -left-12 w-24 h-24 bg-white/10 rounded-full animate-pulse"></div>
        
        {/* 左侧标题 */}
        <div className="flex items-center gap-3 relative z-10">
          <span className="text-2xl">📖</span>
          <span>讲课稿查看器</span>
        </div>
        
        {/* 右侧管理入口 */}
        <button
          onClick={() => window.open('/admin', '_blank')}
          className="relative z-10 bg-white/20 hover:bg-white/30 px-3 py-2 rounded-lg transition-all duration-200 flex items-center gap-2 text-sm font-medium group"
          title="进入后台管理"
        >
          <span className="text-lg group-hover:animate-bounce">⚙️</span>
          <span>管理</span>
        </button>
      </div>

      {/* 工具栏 */}
      <div className="p-4 border-b border-gray-200 bg-gray-50">
        <div className="flex gap-2 items-center flex-wrap">
          <button
            onClick={refreshScript}
            className="px-3 py-2 bg-green-500 text-white text-sm rounded-lg hover:bg-green-600 transition-colors duration-200 flex items-center gap-1"
          >
            🔄 刷新内容
          </button>
          
          <div className="w-px h-5 bg-gray-300"></div>
          
          <button
            onClick={openBackendEditor}
            className="px-3 py-2 bg-purple-500 text-white text-sm rounded-lg hover:bg-purple-600 transition-colors duration-200 flex items-center gap-1"
          >
            ✏️ 后端编辑
          </button>
          
          <div className="w-px h-5 bg-gray-300"></div>
          
          <span className="text-xs text-gray-600 px-2 py-1 bg-gray-100 rounded border">
            最后更新: {lastUpdateTime || '未知'}
          </span>
        </div>
        
        {/* 当前Tab显示 */}
        <div className="mt-2 text-center">
          <span className="text-sm font-medium text-purple-600 bg-purple-100 px-3 py-1 rounded-full">
            {sectionNames[currentSection]} - 第{currentCourseNumber}课
          </span>
        </div>
      </div>

      {/* 内容区域 */}
      <div className="flex-1 overflow-y-auto relative z-10">
        {isLoading ? (
          <div className="flex items-center justify-center h-full">
            <div className="text-center">
              <div className="text-4xl mb-4 animate-spin">⚙️</div>
              <p className="text-purple-600">正在加载讲课稿...</p>
            </div>
          </div>
        ) : (
          <div 
            className="p-6 text-gray-700 leading-relaxed"
            dangerouslySetInnerHTML={{ __html: aiContent }}
          />
        )}
      </div>
    </div>
  )
} 